<template>
	<div class="content">
		<div class="tar m-b10">
			<Button type="primary" @click="add">添加</Button>
		</div>
		<Table ref="selection" :columns="columns4" :data="list"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="changepage"></Page>
		<!-- 添加资讯 -->
		<Modal v-model="modal1" title="添加资讯" :mask-closable="false" width="1200">
			<Form :label-width="100" :model="addForm" ref="addUserForm" :rules="rules">
				<FormItem label="名称" prop="title">
					<Input class="w-50" v-model="addForm.title" placeholder="请输入资讯名称" />
				</FormItem>
				<FormItem label="缩略图" prop="title">
					<div>
						<template>
							<Upload multiple type="drag" :action="axios.defaults.baseURL+'/upload/images/'" :headers="myHeaders" :on-success="handleSuccess" :default-file-list="imgList" name="file" ref="upload1" :format="['jpg','jpeg','png']" :max-size="2048">
								<div style="width: 58px;height:58px;line-height: 58px;margin: 0 auto;">
									<Icon type="ios-camera" size="20"></Icon>
								</div>
							</Upload>
						</template>
					</div>
				</FormItem>
				<FormItem label="内容" prop="content">
					<quill-editor v-model="addForm.content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="addForm.content='';addForm.title = '';modal1 = false">取消</Button>
				<Button type="primary" size="large" @click="addgg">确定</Button>
			</div>
		</Modal>
		<!-- 修改资讯 -->
		<Modal v-model="modal3" title="修改资讯" :mask-closable="false" width="1200">
			<Form :label-width="100" :model="editForm" ref="addUserForm" :rules="rules1">
				<FormItem label="资讯名称" prop="title">
					<Input class="w-50" v-model="editForm.title" placeholder="请输入资讯名称" />
				</FormItem>
				<FormItem label="当前图片">
					<img :src="srcimg" alt width="200">
				</FormItem>
				<FormItem label="内容" prop="content">
					<quill-editor v-model="editForm.content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem>
				<template>
					<Upload multiple type="drag" :headers="myHeaders" :action="axios.defaults.baseURL+'/upload/images/'" :on-success="handleSuccess" name="file">
						<div style="padding: 20px 0">
							<Icon type="ios-camera" size="20" style=""></Icon>
							<p>重新上传图片</p>
						</div>
					</Upload>
				</template>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="editForm.content='';editForm.title = '';modal3 = false">取消</Button>
				<Button type="primary" size="large" @click="emitgg">确定</Button>
			</div>
		</Modal>

		<Modal v-model="modal4" title="查看资讯" width="1200" :footer-hide="true">
			<Form :label-width="100" :model="editForm" ref="addUserForm" :rules="rules1">
				<FormItem label="资讯名称" prop="title">
					<span v-text="editForm.title"></span>
				</FormItem>
				<FormItem label="当前图片">
					<img :src="srcimg" alt width="200">
				</FormItem>
				<FormItem label="内容" prop="content">
					<quill-editor v-model="seeContent" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)" disabled></quill-editor>
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				myHeaders: {
					Authorization: 'bearer ' + localStorage.getItem('mytoken')
				},
				list: [],
				id: '',
				ntid: '',
				falg: false,
				imgUrl: '', // 上传图片地址
				srcimg: '',
				imgList: [],
				// // 分页
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				editorOption: {},
				seeContent: '',
				rules: {
					title: [{
						required: true,
						message: '请输入资讯名称',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}]
				},
				rules1: {
					title: [{
						required: true,
						message: '请输入资讯名称',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}]
				},
				modal1: false,
				modal2: false,
				modal3: false,
				modal4: false,
				addForm: {
					languageId: '',
					title: '',
					content: ''
				},
				editForm: {
					languageId: '',
					title: '',
					content: ''
				},
				index: '',
				columns4: [{
						title: '名称',
						key: 'title'
					},
					{
						title: '缩略图',
						key: 'thumbnail',
						render: (h, params) => {
							return h('div', [
								h('img', {
									attrs: {
										src: this.list[params.index].thumbnail,
										preview: '1'
									},
									style: {
										width: '70px',
										height: '70px',
										margin: '10px 0'
									}
								})
							])
						}
					},
					{
						title: '发布时间',
						key: 'createTime',
						sortable: true
					},

					{
						title: '操作',
						key: 'action',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.modal3 = true
												this.emit(this.list[params.index].id)
											}
										}
									},
									'修改'
								),
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.modal4 = true
												this.emit(this.list[params.index].id)
											}
										}
									},
									'查看'
								),
								h(
									'Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										on: {
											click: () => {
												let $this = this
												this.$Modal.confirm({
													title: '删除资讯',
													content: '是否要删除资讯？',
													onOk: function() {
														$this.remove($this.list[params.index].id)
													}
												})
											}
										}
									},
									'删除'
								)
							])
						}
					}
				]
			}
		},
		methods: {
			// 添加资讯
			add() {
				this.modal1 = true
				this.$refs.upload1.clearFiles()
				this.imgUrl = ''
			},
			addgg() {
				if(!this.addForm.title) {
					this.$Message.info('标题不能为空')
					return false
				}
				if(!this.addForm.content) {
					this.$Message.info('内容不能为空')
					return false
				}
				if(!this.imgUrl) {
					this.$Message.info('请上传图片')
					return false
				}
				let params = this.qs.stringify({
					title: this.addForm.title,
					content: this.addForm.content,
					thumbnail: this.imgUrl
				})
				this.axios.post('/admin/operating/information', params).then(res => {
					if(res.data.code == 200) {
						this.$Message.info(res.data.msg)
						this.getList()
						this.addForm.title = null
						this.addForm.content = null
						this.imgUrl = ''
						this.modal1 = false
						this.$refs.upload1.clearFiles()
					}
				}).catch(e => {
					this.$Message.info(e.response.data.msg)
				})
			},
			// 修改资讯
			emit(id) {
				this.ntid = id
				this.axios.get('/admin/operating/information/' + id).then(res => {
					if(res.data.code == 200) {
						this.editForm.title = res.data.data.title
						this.srcimg = res.data.data.thumbnail
						this.editForm.content = res.data.data.content
						this.imgUrl = this.srcimg
						this.seeContent = res.data.data.content
					}
				}).catch(e => {
					this.$Message.info(e.response.data.msg)
				})
			},
			emitgg() {
				if(!this.editForm.title) {
					this.$Message.info('标题不能为空')
					return false
				}
				if(!this.editForm.content) {
					this.$Message.info('内容不能为空')
					return false
				}
				if(!this.imgUrl) {
					this.$Message.info('请上传图片')
					return false
				}
				this.axios.put('/admin/operating/information?id=' + this.ntid + '&title=' + this.editForm.title + '&thumbnail=' + this.imgUrl + '&content=' + this.editForm.content).then(res => {
					if(res.data.code == 200) {
						this.$Message.info(res.data.msg);
						this.getList();
						this.modal3 = false;
					}
				})
			},
			// 删除资讯
			remove(id) {
				this.axios.delete('/admin/operating/information/' + id).then(res => {
					if(res.data.code == 200) {
						this.$Message.info(res.data.msg);
						this.getList();
					}
				})
			},
			// 获取所有资讯
			getList() {
				let params = this.qs.stringify({
					typeId: 1,
					current: this.page,
					size: this.pageSize
				})
				this.axios.get('/admin/operating/information?current=' + this.page + '&size=' + this.pageSize).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data.records
						this.list.forEach((row, i) => {
							this.list[i].createTime = this.stringToTime(
								this.list[i].createTime
							)
						})
						this.info = res.data.data.total
					}
				}).catch(e => {
					this.$Message.info(e.response.data.msg)
				})
			},
			// 分页
			changepage(page) {
				this.page = page
				let params = this.qs.stringify({
					typeId: 1,
					current: page,
					size: this.pageSize
				})
				this.axios.post('admin/operating/notice/discovers', params).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data.records
						this.info = res.data.data.total
					}
				})
			},
			// 富文本编辑器
			onEditorBlur() {
				// 失去焦点事件
			},
			onEditorFocus() {
				// 获得焦点事件
			},
			onEditorChange() {
				// 内容改变事件
			},
			// 获取上传图片的地址
			handleSuccess(res, file) {
				// this.$refs.upload1.clearFiles()
				this.$Message.info(res.msg)
				this.imgUrl = res.data[0].url
			}
		},
		created() {
			this.getList()
		},
		mounted() {
			this.$Message.config({
				top: 250
			})
		}
	}
</script>

<style lang="less" scoped>
	/deep/.ql-editor {
		min-height: 260px;
	}
	
	/deep/ .ivu-upload {
		/*width: 58px;*/
	}
</style>